<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 回顾 Object.defineProperty() 方法 </title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>给对象添加属性</h1>
    </div>
</body>
<script type="text/javascript">
    let num=18;
    let person = {
        name:'jack',
        sex:'男'
    }
    // 
    Object.defineProperty(person, 'age',{
    //     value:18,
    //     enumerable:true, //控制是否可以枚举
    //     writable:true, //控制是否可以修改
    //     configurable:true //控制是否可以删除

        //通过getter 和 setter 来实现数据的读取和修改
        get(){
            console.log("读取了数据");
            return num;
        },
        set(val){
            console.log("设置了数据");
            num=val;
        }


    });
    console.log(person);


    new Vue({
        el:'#app',
        data:{
            msg:'hello world'
        },
    })
</script>
</html>